<script setup lang="ts">
import { removeToken } from '@/utils/auth';
import service from '@/utils/https';
import { Document, HomeFilled, Lock, Promotion,Avatar } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const userInfo = ref({
  name:''
})

onMounted(async()=>{
  const res = await service.get('/v1_0/user/profile')
  console.log('res',res);
  userInfo.value = res.data.data
  console.log(userInfo.value);

})

const onreset = ref(()=>{
  ElMessageBox.confirm(
    '是否退出登录?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      // 跳转登录页
      router.push('/login')
      // 清空token
      removeToken()
    })
    .catch(() => {})
})


</script>

<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <div class="logo"></div>
      <el-menu router background-color="#023" text-color="#fff" style="border-right:none" :default-active="$route.path">

        <el-menu-item index="/home">
          <el-icon><HomeFilled /></el-icon> 数据概览
        </el-menu-item>

        <el-menu-item index="/article">
          <el-icon><Document /></el-icon> 内容管理
        </el-menu-item>

        <el-menu-item index="/publish">
          <el-icon><Promotion /></el-icon> 发布文章
        </el-menu-item>
        <el-menu-item index="/user">
          <el-icon><Avatar /></el-icon>个人信息
        </el-menu-item>

      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header>
        <span @click="$router.push('/user')">{{ userInfo.name }}</span>

        <el-link @click="onreset" :underline="false">
          <el-icon>
            <Lock />
          </el-icon>
           退出
        </el-link>
      </el-header>

      <!-- 主体 -->
      <el-main>
        <!-- 路由出口，路由插槽 -->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped lang="less">
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #023;

    .logo {
      width: 200px;
      height: 60px;
      background: #023 url('@/assets/images/logo.png') no-repeat center / 160px auto;
    }
  }

  .el-header {
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }
}
</style>
